<template>
  <div class="source-table">
    <el-table class="source-table-body" v-loading="loading" :data="data" height="calc(100vh - 180px)">
      <el-table-column prop="fileName" label="名称" show-overflow-tooltip>
        <template #default="scope">
          <div @dblclick="handleModify(scope.row, 'open')" style="display: flex; align-items: center;">
            <svg-icon style="width: 16px; height: 16px;" :icon-class="fileSetting.getIcon(scope.row.fileType)"></svg-icon>
            <span style="margin-left: 10px;">{{ scope.row.fileName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fileType" label="类型" show-overflow-tooltip width="140"></el-table-column>
      <el-table-column label="操作" width="400">
        <template #default="scope">
          <el-button @click="handleModify(scope.row, 'view')" type="warning" size="small">预览</el-button>
          <el-button @click="handleModify(scope.row, 'download')" type="warning" size="small">下载</el-button>
          <el-button @click="handleModify(scope.row, 'rename')" type="warning" size="small">重命名</el-button>
          <el-button @click="handleModify(scope.row, 'move')" type="warning" size="small">移动</el-button>
          <el-button @click="handleModify(scope.row, 'delete')" type="warning" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="SourceTable">
import fileSetting from "@/views/sources/dirs/config/config.js";

const props = defineProps({
  modelValue: String,
  title: String,
  data: Array,
})

const emit = defineEmits(['update:modelValue', 'modify'])

const {data} = toRefs(props);

const loading = ref(false);

const activeBtn = ref('');

const cdList = ref([
  {
    tagName: '动作'
  }
]);

const handleModify = (row, type) => {
  console.log(row, '当前行数据')
  emit('modify', row, type);
}

watch(() => props.modelValue, () => {
  activeBtn.value = props.modelValue;
})


</script>

<style lang="scss" scoped>
.source-table {
  user-select: none;

  &-body {
    background-color: transparent !important;

    :deep(.el-table__inner-wrapper) {
      background: unset;

      .el-table__header-wrapper {
        background: unset;

        .el-table__header {
          background: unset;

          > thead {
            background: unset;

            > tr {
              background: unset;

              > th.el-table__cell {
                background: rgba(105, 50, 50, 0.24);
                color: #333333;
                border-color: rgba(0, 0, 0, 0.2);
              }
            }
          }
        }
      }

      .el-table__body-wrapper {

        .el-table__body {
          background: unset;

          > tbody {
            background: unset;

            .el-table__row {
              background: unset;

              .el-table__cell {
                color: #333333;
                border-color: rgba(0, 0, 0, 0.05);
              }
            }

            .el-table__row:hover {
              background: rgba(0, 0, 0, 0.05) !important;

              .el-table__cell {
                background: rgba(0, 0, 0, 0.05) !important;
              }
            }
          }
        }
      }
    }

    :deep(.el-table__inner-wrapper::before) {
      background-color: rgba(255, 255, 255, 0.24);
    }

  }

}
</style>

